<template>
  <div>
    <!-- Title -->
    <div>
      <TitleCompound :title="title"></TitleCompound>
    </div>
    <!-- content -->
    <div>
      <!-- 说明信息 -->
      <p><b><a
            href="https://cn.vuejs.org/api/reactivity-utilities.html#toref">toRef</a></b>用来转换响应式对象为ref对象，解构完毕的对象也是响应式的
      </p>
      <p>其中<b>toRefs</b>是一次性将所有属性都转换出来</p>
      <p>其中<b>toRef</b>是可以选择转换哪个属性</p>
      <!-- 解构对象 -->
      <div>
        <h3>解构对象</h3>
        <el-table :data="[person]" border style="width: 100%">
          <el-table-column prop="name" label="name" width="180" />
          <el-table-column prop="age" label="age" width="180" />
          <el-table-column prop="gender" label="gender" />
        </el-table>

        <p>解构之后的：</p>
        <p>Name: {{ name }}</p>
        <p>Age: {{ age }}</p>
        <p>Gender: {{ gender }}</p>

        <p>使用toRef(person, 'name')，仅仅转换name属性</p>
        <p>onlyName: {{ onlyName }}</p>
        <el-button @click="changeName">修改name</el-button>
        <el-button @click="changeAge">修改age</el-button>
        <el-button @click="changeGender">修改gender</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import TitleCompound from '@/components/TitleCompound.vue';
import type { Person } from '@/types';
import { isRef, reactive, toRef, toRefs } from 'vue';
const title = 'toRefs / toRef Quickstart'

const person = reactive<Person>({
  name: '张三',
  age: 18,
  gender: 'male'
})

const { name, age, gender } = toRefs(person)
const onlyName = toRef(person, 'name')

function changeName() {
  name.value = name.value === '张三' ? '李四' : '张三'
}

function changeAge() {
  age.value = age.value + 1
}

function changeGender() {
  console.log("toRefs 的对象也是响应式的，其isRef为True： ", isRef(gender))
  gender.value = gender.value === 'male' ? 'female' : 'male'
}

</script>

<style lang="scss" scoped></style>
